<!--
(C) 2020 URD

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!-- urd-ac-1ch-node Config Node の記述 -->
<script type="text/html" data-template-name="URD AC 1ch sensor">

    <!-- Name -->
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-config-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>

    <!-- Sensor ID -->
    <div class="form-row">
        <label for="node-config-input-sensorId"><i class="fa fa-flag"></i> <span data-i18n="serial.label.sensorId"></span></label>
        <input type="text" id="node-config-input-sensorId" data-i18n="[placeholder]serial.placeholder.sensorId">
    </div>

    <!-- Title of contentData. -->
    <div class="form-row" style="margin-bottom:0;">
        <label><i class="fa fa-list"></i> <span data-i18n="urdDataItem.label.itemNo" /></label>
    </div>
    <!-- List of contentData. -->
    <div>
        <ol id="content_data">
            <!-- Insert $rowTemplate -->
        </ol>
    </div>
</script>

<script type="text/html" data-help-name="URD AC 1ch sensor" charset="utf-8">
    <p>Configure the 1ch current sensor.</p>
    <p>Set the ID of the sensor, the data name and the unit of the measurement target.</p>
</script>

<script type="text/javascript">

// To avoids polluting the global namespace.
(() => {
    RED.nodes.registerType('URD AC 1ch sensor', {
        // Node-RED node definition.
        category: 'config',
        defaults: {
            name: { value: 'ac-1ch-Sensor' },
            sensorId: { value: '', required: true },
            configObject: { value: '' },
            // --------------------
            dataName: { value: '' }, // DO NOT USE THIS, It's just for backward compatible. Remove this in the future.
            unit: { value: '' }, // DO NOT USE THIS, It's just for backward compatible. Remove this in the future.
            // --------------------
        },
        label() { return this.name || ('ac-1ch-Sensor'); },
        oneditprepare() {
            const node = this;

            // Define editableList.
            $('#content_data').css('min-height', '130px').css('min-width', '400px').editableList({
                addButton: false,
                sortable: false,
                removable: false,
                // Process when click add button.
                addItem($row, index, data) {
                    // Labels
                    const labelDataName = node._('urdDataItem.label.dataName');
                    const labelUnit = node._('urdDataItem.label.unit');

                    const dataName = data.dataName || '';
                    const unit = data.unit || '';

                    // A row template.
                    const $rowTemplate = $(`
                        <div class="row">
                            <!-- dataName -->
                            <div class="form-row">
                                <label><i class="fa fa-tag"></i> ${labelDataName}</label>
                                <input type="text" class="data-name" value="${dataName}">
                            </div>
                            <!-- unit -->
                            <div class="form-row">
                                <label><i class="fa fa-tag"></i> ${labelUnit}</label>
                                <input type="text" class="unit" style="width: 100px;" value="${unit}">
                            </div>
                        </div>
                    `);

                    // Append row.
                    $rowTemplate.appendTo($row);
                },
            });

            // Default values for each row.
            const dataNameDefault = node._('urdDataItem.input.dataName');
            const unitDefault = node._('urdDataItem.input.unit');
            const defaultRows = [{ dataName: dataNameDefault, unit: unitDefault }];

            // Stack rows.
            let configObject;
            if (typeof this.configObject === 'string') {
                // --------------------
                // configObject may be old version. This section is for backward compatible. Remove this seciton in the future.
                debugger;
                const cf = JSON.parse(this.configObject);
                configObject = [{ dataName: cf[0].dataName, unit: cf[0].unit }];
                // --------------------
            } else {
                configObject = this.configObject || defaultRows;
            }
            // configObject = [ // It's just a test code.
            //     { dataName: '電流a', unit: 'あ' },
            // ];
            $('#content_data').editableList('addItems', configObject);
        },
        oneditsave() {
            const editableItems = $('#content_data').editableList('items');

            this.configObject = Array.from(editableItems).map(($item) => {
                return {
                    dataName: $item.find('.data-name').val(),
                    unit: $item.find('.unit').val(),
                };
            });
            // --------------------
            // This section is for backward compatible. Remove this seciton in the future.
            this.dataName = undefined;
            this.unit = undefined;
            // --------------------
        },
    });
})();

</script>
